<!--模板-->
<template>
    <div>
        <!--   必须在div标签里,大小写都可以，to属性跳转到哪个组件，tag属性：自身渲染,moren s a
            biaoqian -->
        <router-link to="/index">根路径</router-link>
        <router-link to="/demo/?id" tag="span">demo</router-link>
        <router-link to="/compoentList?id=15&name=张三">compoentList</router-link>
        <router-link to="/watchTest">WatchTest</router-link>
        <router-link to="/compute">计算</router-link>
        <router-link to="/xlcss">css</router-link>
        <router-link to="/myform">myform</router-link>
        <router-link to="/routerTest">路由测试</router-link>

        <router-view name="left"></router-view>
        <router-view name="main"></router-view>

        <!--展示位置，占位符-->
        <transition mode="out-in">
            <!--组件切换后不重置 ,include里面放的是组件的name，注意不是路由的name。 include里面能写字符串，也能用数组，正则来表达。-->
            <keep-alive :include="/comp*/">
                <router-view></router-view>
            </keep-alive>
        </transition>
    </div>
</template>
<!---->

<!--业务逻辑-->
<script>
</script>

<!--样式-->
<style scoped>
    .v-enter, .v-leave-to {
        opacity: 0;
        transform: translateX(150px);
    }

    .v-enter-active, .v-leave-active {
        transition: all 0.2s ease;
    }

    .router-link-active {
        color: forestgreen;
        background: green;
    }

</style>
